<#assign ctx=request.contextPath />
<#import '${ctx}/sys/include/table/toolbar.html' as t/>
<#macro body>
<body class="layui-layout-body">
<div id="main_content" class="layadmin-tabspage-none">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <!-- 头部区域 -->
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item layadmin-flexible" lay-unselect="">
                    <a href="javascript:;" layadmin-event="flexible" title="侧边伸缩">
                        <i class="layui-icon layui-icon-shrink-right"
                           id="main_content_flexible"></i>
                    </a>
                </li>
                <li class="layui-nav-item" lay-unselect=""><a
                        href="javascript:;" layadmin-event="refresh" title="刷新"> <i
                        class="layui-icon layui-icon-refresh-3"></i>
                </a></li>
                <span class="layui-nav-bar"
                      style="left: 38px; top: 48px; width: 0px; opacity: 0;"></span>
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;"><img src="${ctx}/resource/img/user.jpg" class="layui-nav-img">管理员</a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a href="javascript:;">用户信息</a>
                        </dd>
                        <!--<dd>-->
                        <!--<a href="javascript:;">安全管理</a>-->
                        <!--</dd>-->
                        <dd>
                            <a href="${ctx}/logout">退出</a>
                        </dd>
                    </dl>
                </li>
            </ul>
        </div>
        <!-- 侧边菜单 -->
        <div class="layui-side layui-side-menu">
            <div class="layui-side-scroll">
                <div class="layui-logo">
                    <!--<span>VIES数据分析平台</span>-->
                    <H3>数据分析平台</H3>
                </div>
                <ul class="layui-nav layui-nav-tree" lay-shrink="all" id="LAY-system-side-menu"
                    lay-filter="layadmin-system-side-menu">

                    <li data-name="homepage" data-jump="homepage1" class="layui-nav-item">
                        <a href="javascript:;" lay-tips="首页" lay-direction="2">
                            <i class="layui-icon layui-icon-home"></i>
                            <!--不同权限的人可以看到不同的页面，进行不同的操作-->
                            <cite>首页</cite>
                            <span class="layui-nav-more"></span>
                        </a>
                        <dl class="layui-nav-child">
                            <dd data-name="homepage1" data-jump="/" class="">
                                <a href="#" lay-href="/">首页一</a>
                            </dd>
                        </dl>
                    </li>

                    <!--<li data-name="dashboard" data-jump="" class="layui-nav-item">-->
                        <!--<a href="javascript:;" lay-tips="数据仪表盘" lay-direction="2">-->
                            <!--<i class="layui-icon layui-icon-engine"></i>-->
                            <!--<cite>数据仪表盘</cite>-->
                            <!--<span class="layui-nav-more"></span>-->
                        <!--</a>-->
                        <!--<dl class="layui-nav-child">-->
                            <!--<dd class="">-->
                                <!--<a href="#">仪表盘定义</a>-->
                            <!--</dd>-->
                            <!--<dd>-->
                                <!--<a href="#">仪表盘列表</a>-->
                            <!--</dd>-->
                        <!--</dl>-->
                    <!--</li>-->

                    <li data-name="dataanalysis" data-jump="" class="layui-nav-item">
                        <a href="javascript:;" lay-tips="数据可视化" lay-direction="2">
                            <i class="layui-icon layui-icon-chart-screen"></i>
                            <cite>数据可视化</cite>
                            <span class="layui-nav-more"></span>
                        </a>
                        <dl class="layui-nav-child">
                        	<dd data-name="" data-jump="/" class="">
                                <a href="${ctx}/biz/discover/p/discover">数据检索</a>
                            </dd>
                            <dd data-name="" data-jump="/" class="">
                                <a href="${ctx}/biz/visualize/chart">图表定义</a>
                            </dd>
                            <dd data-name="" data-jump="">
                                <a href="${ctx}/biz/visualize/chart_setting/chart_setting_list" lay-href="">图表列表</a>
                            </dd>
                            <dd data-name="" data-jump="/" class="">
                                <a href="${ctx}/biz/chart/def/p/chart_def">定制图表</a>
                            </dd>
                            <!--<dd data-name="" data-jump="/" class="">-->
                            <!--<a href="${ctx}/biz/visualize/pie">饼图</a>-->
                            <!--</dd>-->
                            <!--<dd data-name="" data-jump="">-->
                            <!--<a href="${ctx}/biz/visualize/bar" lay-href="">柱状图</a>-->
                            <!--</dd>-->
                            <!--<dd data-name="" data-jump="">-->
                            <!--<a href="${ctx}/biz/visualize/line" lay-href="">折线图</a>-->
                            <!--</dd>-->
                        </dl>
                    </li>

                    <li data-name="datasourcemanagement" data-jump="" class="layui-nav-item">
                        <a href="javascript:;" lay-tips="数据源管理" lay-direction="2">
                            <i class="layui-icon layui-icon-component"></i>
                            <cite>数据源管理</cite>
                            <span class="layui-nav-more"></span>
                        </a>
                        <dl class="layui-nav-child">
                            <dd data-name="" data-jump="/" class="">
                                <a href="${ctx}/biz/data/ds/p/ds_table" lay-href="/">数据源管理</a>
                            </dd>
                            <dd data-name="" data-jump="/" class="">
                                <a href="${ctx}/biz/data/ds/p/field_table" lay-href="/">字段管理</a>
                            </dd>
                        </dl>
                    </li>
                    <li data-name="data_etl" data-jump="" class="layui-nav-item">
                        <a href="javascript:;" lay-tips="数据接入" lay-direction="2">
                            <i class="layui-icon layui-icon-user"></i>
                            <cite>数据接入</cite>
                            <span class="layui-nav-more"></span>
                        </a>
                        <dl class="layui-nav-child">
                            <dd class="">
                                <a href="${ctx}/biz/etl/p/table">接入任务列表</a>
                            </dd>
                            <dd class="">
                                <a href="${ctx}/biz/etl/p/config">数据接入任务</a>
                            </dd>
                        </dl>
                    </li>

                    <li data-name="datasourcemanagement" data-jump="" class="layui-nav-item">
                        <a href="javascript:;" lay-tips="spark" lay-direction="2">
                            <i class="layui-icon layui-icon-component"></i>
                            <cite>spark</cite>
                            <span class="layui-nav-more"></span>
                        </a>
                        <dl class="layui-nav-child">
                            <dd data-name="" data-jump="/" class="">
                                <a href="${ctx}/biz/spark/conf/p/spark_conf" lay-href="/">配置管理</a>
                            </dd>
                            <dd data-name="" data-jump="/" class="">
                                <a href="${ctx}/biz/spark/conf/p/config_table" lay-href="/">任务管理</a>
                            </dd>
                            <dd data-name="" data-jump="/" class="">
                                <a href="${ctx}/biz/c/p/json_editor" lay-href="/">任务配置</a>
                            </dd>
                        </dl>
                    </li>

                    <li data-name="systemstatus" data-jump="" class="layui-nav-item">
                        <a href="javascript:;" lay-tips="系统管理" lay-direction="2">
                            <i class="layui-icon layui-icon-log"></i>
                            <cite>系统管理</cite>
                            <span class="layui-nav-more"></span>
                        </a>
                        <dl class="layui-nav-child">
                            <dd data-name="" data-jump="/" class="">
                                <a href="${ctx}/biz/data/dw/p/dw_table" lay-href="/">数据仓库配置</a>
                            </dd>
                            <dd data-name="" data-jump="/" class="">
                                <a href="#" lay-href="/">系统参数配置</a>
                            </dd>
                            <dd data-name="" data-jump="">
                                <a href="#" lay-href="">系统状态监控</a>
                            </dd>
                        </dl>
                    </li>

                    <li data-name="usermanagement" data-jump="" class="layui-nav-item">
                        <a href="javascript:;" lay-tips="用户管理" lay-direction="2">
                            <i class="layui-icon layui-icon-user"></i>
                            <cite>用户管理</cite>
                            <span class="layui-nav-more"></span>
                        </a>
                        <dl class="layui-nav-child">
                            <dd class="">
                                <a href="${ctx}/sys/user/p/user_table">账号管理</a>
                            </dd>
                            <dd>
                                <a href="${ctx}/sys/role/p/role_table">用户角色管理</a>
                            </dd>
                            <dd>
                                <a href="#">角色权限管理</a>
                            </dd>
                        </dl>
                    </li>
                    <script>
                    </script>
                    <span class="layui-nav-bar"
                          style="top: 308px; height: 0px; opacity: 0;"></span>
                </ul>
            </div>
        </div>

        <!-- 主体内容 -->
        <div class="layui-body" id="main_content_body">
            <div class="layadmin-tabsbody-item layui-show">
                <div style="padding: 0 15px;">
                    <#nested>
                </div>
            </div>
        </div>

        <!-- 辅助元素，一般用于移动设备下遮罩 -->
        <div class="layadmin-body-shade" layadmin-event="shade"></div>
    </div>
</div>
</body>
<script type="text/javascript">
    layui.use(['element', 'layer'], function () {
        var element = layui.element,
            layer = layui.layer;
        var $ = layui.$;
        var sideHide = 0;

        $(window).ready(function () {
            bindSide();
            var rpath = getUrlRelativePath();
            $ta = $("a[href='" + rpath + "']");
            $ta.parent().addClass("layui-this");
            $ta.parent().parent().parent().addClass("layui-nav-itemed");
        });
        $(window).on('resize', function () {
            bindSide();
        });
        $("body").find("*[lay-tips]").on("mouseenter", function () {
            var e = $(this);
            if (sideHide == 1) {
                var t = e.attr("lay-tips")
                    , i = e.attr("lay-offset")
                    , n = e.attr("lay-direction")
                    , l = layer.tips(t, this, {
                    tips: n || 1,
                    time: -1,
                    success: function (e, a) {
                        i && e.css("margin-left", i + "px")
                    }
                });
                e.data("index", l)
            }
        }).on("mouseleave", function () {
            layer.close($(this).data("index"))
        });

        function bindSide() {
            var device = layui.device();
            $('.layadmin-body-shade').unbind('click');
            if (device.android || device.ios) {
                $('.layadmin-body-shade').bind('click', function () {
                    if ($("#main_content").hasClass('layadmin-side-spread-sm')) {
                        $("#main_content").removeClass('layadmin-side-spread-sm');
                        sideHide = 0;
                    } else {
                        $("#main_content").addClass('layadmin-side-spread-sm');
                        sideHide = 1;
                    }
                });
            }
            $(".layui-nav-item.layadmin-flexible").unbind('click');
            $(".layui-nav-item.layadmin-flexible").bind('click', function () {
                if (device.android || device.ios) {
                    if ($("#main_content").hasClass('layadmin-side-spread-sm')) {
                        $("#main_content").removeClass('layadmin-side-spread-sm');
                        sideHide = 0;
                    } else {
                        $("#main_content").addClass('layadmin-side-spread-sm');
                        sideHide = 1;
                    }
                } else {
                    if ($("#main_content").hasClass('layadmin-side-shrink')) {
                        $("#main_content").removeClass('layadmin-side-shrink');
                        sideHide = 0;
                    } else {
                        $("#main_content").addClass('layadmin-side-shrink');
                        sideHide = 1;
                    }
                }

            });
        }

        function getUrlRelativePath() {
            var url = document.location.toString();
            var arrUrl = url.split("//");

            var start = arrUrl[1].indexOf("/");
            var relUrl = arrUrl[1].substring(start);//stop省略，截取从start开始到结尾的所有字符

            if (relUrl.indexOf("?") != -1) {
                relUrl = relUrl.split("?")[0];
            }
            return relUrl;
        }
    })
</script>
</#macro>
<#macro table
table_name
table_list
add_name
update_name
deletes
delete
detail_page
detail_find
detail_name
>
<table class="layui-hide" id="${table_name}" lay-filter="${table_name}">
</table>
<#nested>
<script>
    layui.use(['table', 'appJs'], function () {
        var table = layui.table;
        var app = layui.appJs;
        var $ = layui.$;


        var colomns = [];
        colomns.push({type: 'checkbox', fixed: 'left'});
        colomns.push({field: 'id', title: 'id'});
        if (cols) {
            layui.each(cols, function (_, c) {
                colomns.push(c);
            });
        }
        colomns.push({fixed: 'right', width: 165, align: 'center', toolbar: '#itemBar'});
        var tableOptions = {
            elem: '#${table_name}'
            , url: '${table_list}' //数据接口
            , title: ''
            , page: true //开启分页
            , toolbar: '#topBar' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
            , cols: [colomns]
        };
        table.render(tableOptions);
        table.on('toolbar(${table_name})', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    var info_layer = layer.open({
                        type: 2
                        , title: '${add_name}'
                        , maxmin: true//开启最大化最小化按钮
                        , content: ['${detail_page}']
                        , success: function (layero, index) {
                            var iframeWin = window[layero.find('iframe')[0]['name']];
                            if (typeof(add_success) == "function") {
                                add_success(iframeWin);
                            }
                        }
                        , end: function () {
                            if (typeof(add_end) == "function") {
                                add_end();
                            }
                            table.reload('${table_name}', tableOptions);
                        }

                    });
                    layer.full(info_layer);
                    break;
                case 'delete':
                    if (checkStatus.data.length <= 0) {
                        layer.msg("未选中删除行");
                        return;
                    }
                    layer.confirm('确定删除吗？', function (index) {
                        var ids = [];
                        for (var r of checkStatus.data) {
                            ids.push(r.id);
                        }
                        $.ajax({
                            type: 'post',
                            url: '${deletes}',
                            data: {ids: ids},
                            traditional: true,
                            success: function (data) {
                                if (data.code == 0) {
                                    layer.msg("删除成功");
                                    table.reload('${table_name}', tableOptions);
                                } else {
                                    layer.msg(data.code + ":" + data.msg);
                                }
                            }
                        });
                    });

                    break;
            }
            ;
        });

        table.on('tool(${table_name})', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if (layEvent === 'detail') { //查看
                var layerIndex = layer.open({
                    type: 2
                    , title: '${detail_name}'
                    , maxmin: true//开启最大化最小化按钮
                    , content: ['${detail_page}']
                    , success: function (layero, index) {
                        var iframeWin = window[layero.find('iframe')[0]['name']];
                        if (typeof(detail_success) == "function") {
                            detail_success(layero, index, '${detail_find}', data.id);
                        } else {
                            app.fillForm($(iframeWin.document).find('.layui-form'), '${detail_find}', data.id, layero);
                            app.disableForm($(iframeWin.document).find('.layui-form'));
                            //iframeWin.layui.form.render();
                        }
                    }
                });
                layer.full(layerIndex);
            } else if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                        type: 'post',
                        url: '${delete}',
                        data: {id: data.id},
                        success: function (data) {
                            if (data.code == 0) {
                                layer.msg("删除成功");
                                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                layer.close(index);
                            } else {
                                layer.msg(data.code + ":" + data.msg);
                            }
                        }
                    });
                });
            } else if (layEvent === 'edit') { //编辑
                //do something
                var info_layer = layer.open({
                    type: 2
                    , title: '${update_name}'
                    , maxmin: true//开启最大化最小化按钮
                    , content: ['${detail_page}']
                    , success: function (layero, index) {
                        var iframeWin = window[layero.find('iframe')[0]['name']];
                        $(iframeWin.document).find('.layui-form').append('<input name="id" type="hidden" />');
                        if (typeof(edit_success) == "function") {
                            edit_success(layero, index, '${detail_find}', data.id);
                        } else {
                            app.fillForm($(iframeWin.document).find(".layui-form"), '${detail_find}', data.id, layero);
                            //iframeWin.layui.form.render();
                        }
                    },
                    end: function () {
                        table.reload('${table_name}', tableOptions);
                    }
                });
                layer.full(info_layer);
            }
        });
    })
</script>
<@t.bar />
</#macro>